import { defineComponent, h, markRaw, nextTick } from 'vue'
import ContainerNode from '../../ItemNode/ContainerNode'
import { ElCard, ElInput, ElRadioButton, ElRadioGroup, ElText } from 'element-plus'
import classes from '../../ItemNode/ItemNode.module.css'

export default class NCard extends ContainerNode {
  isNCard = true
  isDataDisplayNode = true

  constructor(node?: NCard) {
    super(node)

    if (!node) {
      this.path = './components/NCard/NCard.tsx'
      this.name = '卡片容器'

      this.props.header = null
      this.props.footer = null
      this.props.shadow = 'always'

      this.props.style.borderColor = 'transparent'
    }

    const pComponent = this.component
    this.component = markRaw(
      defineComponent(
        (props, { slots }) => {
          return () => (
            <pComponent>
              <ElCard
                style="box-sizing: border-box; width: 100%; height: 100%;"
                body-style={{ boxSizing: 'border-box', width: '100%', height: '100%' }}
                shadow={this.props.shadow}
              >
                {{
                  header: this.props.header ? () => this.props.header : null,
                  footer: this.props.footer ? () => this.props.footer : null,
                  default: () =>
                    this.children.map((child) => h(child.component, { key: child.uuid }))
                }}
              </ElCard>
            </pComponent>
          )
        },
        {
          name: 'NCard'
        }
      )
    )

    const pView = this.view
    this.view = markRaw(
      defineComponent((props) => {
        nextTick(() => (this.props.style.borderColor = 'transparent')) // 要在父组件ContainerNode渲染完(borderColor设置后)再设置borderColor

        return () => <pView></pView>
      })
    )

    const pParams = this.params
    this.params = markRaw(
      defineComponent(() => {
        return () => (
          <pParams>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                标题
              </ElText>
              <div class={classes['params-item-content']}>
                <ElInput v-model={this.props.header} size="small"></ElInput>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                页脚
              </ElText>
              <div class={classes['params-item-content']}>
                <ElInput v-model={this.props.footer} size="small"></ElInput>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                阴影显示时机
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup v-model={this.props.shadow} size="small">
                  <ElRadioButton label="一直显示" value="always"></ElRadioButton>
                  <ElRadioButton label="不显示" value="never"></ElRadioButton>
                  <ElRadioButton label="hover" value="悬停显示"></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
          </pParams>
        )
      })
    )
  }

  toVue(): SfcObj {
    const sfcObj = super.toVue()

    sfcObj.imports = {
      ...sfcObj.imports,
      'element-plus': {
        ElCard: 'ElCard'
      }
    }

    sfcObj.template = sfcObj.template.replace(
      '<slot></slot>',
      `
  <ElCard
    style="box-sizing: border-box; width: 100%; height: 100%;"
    :body-style="{ boxSizing: 'border-box', width: '100%', height: '100%' }"
    shadow="${this.props.shadow}"
  >
    ${this.props.header ? `<template #header>${this.props.header}</template>` : ''}
    ${this.props.footer ? `<template #header>${this.props.footer}</template>` : ''}
    ${this.children.map((child) => child.uuid).join('\n  ')}
  </ElCard>
  `
    )

    return sfcObj
  }
}
